import React, { Component } from 'react'
import {Card,Button,Table,Tag,Popconfirm,message} from 'antd'
import Moment from 'moment'
import XLSX from 'xlsx'
import { getArticleList ,delArt} from "../../api"
// Moment.locale()
export default class Article extends Component {
  constructor(){
	  super()
	  this.state = {
		  data:[["a","b"],[1,2],[2,3]],
		  lists:[],
		  total:0,
		  current:1,
		  loading:true,
		  pageSize:5,
		  columns:[
			  {
			    title: '标题',
			    dataIndex: 'title',
			    key: 'title',
			  },
			  {
			    title: '作者',
			    dataIndex: 'author',
			    key: 'author',
			  },
			  {
			    title: '描述',
			    dataIndex: 'desc',
			    key: 'desc',
			  },
			  {
			    title: '阅读量',
			    render:(text,record,index)=>{
			    	return (
			    		<Tag color={ record.amount>250?'red':'green'  }>
			    			{ record.amount }
			    		</Tag>
			    	)
			    },
			    key: 'amount',
			  },
			  {
			    title: '创建时间',
			    // dataIndex: 'createAt',
				render:(record)=>{
					return Moment(record.createAt).format("YYYY-MM-DD hh:mm:ss")
				},
			    key: 'createAt',
			  },
			  {
				  title:"操作",
				  render:(record)=>{
				   return (
				    <>
				     <Button 
						type="primary" 
						size="small"
						onClick={ ()=>{
							this.props.history.push(`/admin/artEdit/${record.id}`)
						} }
					>编辑</Button>
					 <Popconfirm
					     title="您确认要删除吗?"
					     onConfirm={ 
							 ()=>{ this.delArt(record.id) }
						 }
					     onCancel={ ()=>{ } }
					     okText="删除"
					     cancelText="取消"
					   >
						<Button type="danger" style={{marginLeft:5}} size="small">删除</Button>
					   </Popconfirm>
				     </>
				   ) 
				  },
				  key:"cauozuo"
			  }
		  ]
	  }
  }
  render() {
    return (
      <div>
        <Card
          title= { 
            <>
            <span>文章编辑</span>
            <Button type="primary" 
			onClick={ ()=>{ this.props.history.push("/admin/artAdd") } }
			style={ { marginLeft:"10px" } }>增加</Button>
            </>
           }
          extra = {
            <Button size="small" onClick = { this.exportFile  }>导出</Button>
          }
        >
          <Table
          loading={this.state.loading}
          dataSource={this.state.lists} columns={this.state.columns} 
          pagination={ {
            pageSize:this.state.pageSize,
            total:this.state.total,
            onChange:(page,pageSize)=>{
				this.getArtList(page,pageSize);
            }
          } }
          />;
        </Card>
      </div>
    )
  }
  componentDidMount(){
	this.getArtList()  
  }
  initExportData =(data)=>{
	  let arr = [];
	  let title = Object.keys(data[0]);
	  arr.push(title);
	  data.forEach(el=>{
		  el.createAt = Moment(el.createAt).format('YYYY-MM-DD hh:mm:ss');
		  arr.push(Object.values(el));
	  })
	  this.setState({
		  data:arr
	  })
  }
  exportFile = ()=>{
	  // 导出为excel
	 const ws = XLSX.utils.aoa_to_sheet(this.state.data);
	 const wb = XLSX.utils.book_new();
	 XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
	 
	 XLSX.writeFile(wb, "文章列表.xlsx")
	  		
   }
  getArtList = (current=1,pageSize=5)=>{
	  // 获取文章列表数据
	  getArticleList({ current , pageSize }).then(res=>{
		  let { lists,total } = res.data.data;
		  console.log(lists,total)
		  this.initExportData(lists);
		  lists.forEach(el=>{
			  el.key = el.id
		  })
		  this.setState({
			  lists,
			  total,
			  loading:false
		  })
	  })
  }
  delArt=(id)=>{
	  // 删除文章
	  delArt(id).then(res=>{
		  message.success(res.data.msg)
	  })
  }
}
